<div id="main">
  <!--  <canvas id="canvas"></canvas>-->
  <div class="center_container">
    <div style="background: #ffffff;
  box-shadow: -15px 15px 15px rgba(0,0,0,.4);display: flex;border-radius: 12px;"
         class="animate__animated animate__flip">
      <div id="info_container" class="info_container">
        <div class="logo_container">
          <img class="logo"
               src="https://jsuccw.oss-cn-beijing.aliyuncs.com/图片/logo/LOGO.png?versionId=CAEQGhiBgMCmubG57RciIGRmMjY4OGIzODZmNjQwZjc5YWUxMGU1MzhkOGZiMWY1">
        </div>
        <div>
          <h3>为了更好的offer而努力</h3>
        </div>
      </div>
      <div id="login_container" class="login_container inner_container" *ngIf="!on">
        <div class="btn_container">
          <nz-button-group>
            <button nz-button nzType="default">注册/登录</button>
            <button nz-button nzType="primary">密码登录</button>
          </nz-button-group>
        </div>
        <!--          <div class="input_box">-->
        <!--            <label><i nz-icon nzType="user" nzTheme="outline"></i></label>-->
        <!--            <div>-->
        <!--              <label>-->
        <!--                <input type="text" nz-input [(ngModel)]="ammount" nzBorderless placeholder="账号"/>-->
        <!--              </label>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div class="input_box">-->
        <!--            <label><i nz-icon nzType="lock" nzTheme="outline"></i></label>-->
        <!--            <div>-->
        <!--              <label>-->
        <!--                <input [type]="'password'" [(ngModel)]="password" nz-input nzBorderless placeholder="密码"/>-->
        <!--              </label>-->

        <!--            </div>-->
        <!--          </div>-->
        <div>
          <input class="input" nz-input [(ngModel)]="amount" placeholder="请输入邮箱/手机号码"/>
          <input class="input" nz-input [(ngModel)]="password" placeholder="请输入密码"/>
        </div>

        <div class="ope_box">
          <button nz-button nzType="primary" class="ope_btn" (click)="changeOn(on)">登录</button>
          <!--          <button nz-button nzType="primary" class="ope_btn animate__animated" (click)="changeOn(!on)">注册</button>-->
        </div>
        <div id="login_footer">
          <p>欢迎登录图书借阅系统</p>
        </div>

      </div>

      <!--      <div id="register_box" class="animate__animated animate__flip" *ngIf="on">-->
      <!--        <div id="register_div">-->
      <!--          <div>-->
      <!--            <h3 class="title">用户注册</h3>-->
      <!--          </div>-->

      <!--          <div class="input_box">-->
      <!--            <label><i nz-icon nzType="user"></i></label>-->
      <!--            <div>-->
      <!--              <label>-->
      <!--                <input type="text" nz-input [(ngModel)]="name" nzBorderless placeholder="请输入用户名">-->
      <!--              </label>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="input_box">-->
      <!--            <label><i nz-icon nzType="mail" nzTheme="outline"></i></label>-->
      <!--            <div>-->
      <!--              <input type="text" nz-input [(ngModel)]="email" nzBorderless placeholder="邮箱"/>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="input_box">-->
      <!--            <label><i nz-icon nzType="lock" nzTheme="outline"></i></label>-->
      <!--            <div>-->
      <!--              <input [type]="'password'" [(ngModel)]="password" nz-input nzBorderless placeholder="密码"/>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="input_box">-->
      <!--            <label><i nz-icon nzType="lock" nzTheme="outline"></i></label>-->
      <!--            <div>-->
      <!--              <input [type]="'password'" [(ngModel)]="repassword" nz-input nzBorderless placeholder="请再次输入密码"/>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="input_box">-->
      <!--            <label><i nz-icon nzType="check" nzTheme="outline"></i></label>-->
      <!--            <div>-->
      <!--              <input style="width: 60%;display: inline-block;" [type]="'text'" [(ngModel)]="text" nz-input nzBorderless-->
      <!--                     placeholder="验证码">-->
      <!--              <button nz-button nzType="link" style="display: inline-block;width: 10px;" (click)="sendEmail()">发送验证码-->
      <!--              </button>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="ope_box">-->
      <!--            <button nz-button nzType="primary" class="ope_btn" (click)="changeOn(!on)">登录</button>-->
      <!--            <button nz-button nzType="primary" class="ope_btn animate__animated" (click)="changeOn(on)">注册</button>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <!--    </div>-->
    </div>
  </div>
